<!-- 
说明：订单表列表
作者：292303959@qq.com
日期：2018-10-17 10:5:39
版本：1.0.0
-->
<template>
  <div>
    <mk-search-box>
      <el-row>
        <el-col :span="5">
          <label>客户名称:</label>
          <el-input v-model="ui.searchData.mname"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>订单状态:</label>
          <mk-config-select mk-config="ORDER_STATUS"
                            v-model="ui.searchData.orderstatus"
                            size="small"
                            mkEmptyLabel="请选择"></mk-config-select>
        </el-col>
        <el-col :span="5">
          <label>下单时间:</label>
          <el-date-picker v-model="ui.searchData.underdate"
                          type="daterange"
                          align="right"
                          format="yyyy-MM-dd"
                          placeholder="选择日期范围">
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          <label>是否首单:</label>
          <mk-config-select mk-config="Z_ISFIRST"
                            v-model="ui.searchData.isfirst"
                            size="small"
                            mkEmptyLabel="请选择"></mk-config-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <label>订单编号:</label>
          <el-input v-model="ui.searchData.orderid"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>收件人:</label>
          <el-input v-model="ui.searchData.recipients"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>联系方式:</label>
          <el-input v-model="ui.searchData.cellphone"
                    size="small"></el-input>
        </el-col>
        <el-col :span="5">
          <label>收货地址:</label>
          <el-input v-model="ui.searchData.adress"
                    size="small"></el-input>
        </el-col>

        <el-col :span="3">
          <mk-search-buttons v-model="ui.searching" />
        </el-col>
      </el-row>
    </mk-search-box>
    <mk-table v-model="ui"
              mk-index
              mk-sql-code="tOrder.select_list"
              mk-table-id="t-order.list.common"
              :mk-init-search-data="initSearchData"
              ref="table">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div>
            <mk-table mk-index
                      :mk-show-page-size="false"
                      :mk-uri="`/tOrderDetail/list.json?orderid=${scope.row.orderid}`"
                      :mk-table-id="`t-order.list.common.${scope.row.orderid}`"
                      height="auto"
                      ref="table">
              <el-table-column align="left"
                               prop="img"
                               label="图片"
                               width="70">
                <template slot-scope="scope2">
                  <mk-img-view :img="scope2.row.img"
                               hover-max
                               mini />
                </template>
              </el-table-column>
              <el-table-column align="left"
                               prop="pdname"
                               label="商品名称"
                               width="200" />
              <el-table-column align="left"
                               prop="brname"
                               label="系列名称"
                               width="200" />
              <el-table-column align="left"
                               prop="psname"
                               label="规格"
                               width="70" />
              <el-table-column align="left"
                               prop="detailrnumber"
                               label="下单数量"
                               width="70" />
              <el-table-column align="left"
                               prop="aftersalenum"
                               label="售后数量"
                               width="70" />
              <el-table-column align="left"
                               prop="detailtotal"
                               label="总价"
                               width="70" />
            </mk-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="left"
                       prop="orderid"
                       label="订单编号"
                       width="200" />
      <el-table-column align="left"
                       prop="mname"
                       label="客户名称"
                       width="100" />
      <el-table-column align="left"
                       prop="orderamount"
                       label="订单金额"
                       width="70" />
      <el-table-column align="left"
                       prop="underdate"
                       label="下单时间"
                       sortable="custom"
                       width="150" />
      <el-table-column align="left"
                       prop="recipients"
                       label="收件人"
                       width="130" />
      <el-table-column align="left"
                       prop="cellphone"
                       label="手机"
                       width="100" />
      <el-table-column align="left"
                       prop="paytype"
                       label="支付方式"
                       width="70">
        <template slot-scope="paytype">
          {{paytype.row.paytype | data-config('Z_PAYTYPE')}}
        </template>
      </el-table-column>
      <el-table-column align="left"
                       prop="isfirst"
                       label="是否首单"
                       width="70">
        <template slot-scope="isfirst">
          {{isfirst.row.isfirst | data-config('Z_ISFIRST')}}
        </template>
      </el-table-column>
      <el-table-column align="left"
                       prop="orderstatus"
                       label="订单状态"
                       width="70">
        <template slot-scope="orderstatus">
          {{orderstatus.row.orderstatus | data-config('ORDER_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column align="left"
                       prop="salestatus"
                       label="售后状态"
                       width="70">
        <template slot-scope="salestatus">
          {{salestatus.row.salestatus | data-config('ORDER_SALE_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column prop="doing"
                       align="center"
                       label="操作"
                       width="120">
        <template slot-scope="scope">
          <edit :row="scope.row"
                @reload="doSearch"
                v-if="scope.row.orderstatus!=0||scope.row.orderstatus!=5" />
          <mk-button :type="4"
                     @click="unlinePay(scope.row.orderid,scope.row.mid,scope.row.orderamount)"
                     confirm-text="确定该订单已经线下支付了吗？"
                     v-if="scope.row.orderstatus==0">线下支付</mk-button>
        </template>
      </el-table-column>
    </mk-table>
  </div>
</template>

<script>
  import {
    MkBase
  } from 'element-ui'
  import Edit from './list/edit-button'
  import searchData from './list/search-data'
  import dayjs from 'dayjs'

  export default {
    name: 't-order-list',
    mixins: [MkBase],
    components: {
      Edit
  
    },
    data () {
      return {
        ui: {
          searching: true,
          searchData: searchData()
        }
      }
    },
    methods: {
      /**
       * 刷新本页面
       */
      doSearch () {
        this.ui.searching = true
      },
      async unlinePay (orderid, mid, orderamount) {
        let data = await this.$post('/tOrder/unlinePay.json', {
          orderid: orderid,
          mid: mid,
          orderamount: orderamount
        })
        if (data) {
          this.doSearch()
        }
      },
      initSearchData (data, flag) {
        if (data.underdate.length > 0) {
          data.bdate = dayjs(data.underdate[0]).format('YYYY-MM-DD 00:00:00')
          data.edate = dayjs(data.underdate[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          data.bdate = ''
          data.edate = ''
        }
      }
    }
  }
</script>